/*
*
* 
选择题添加
*/
<template>
  <div>
    <div class="select">
      <el-form label-width="100px" ref="selectTopic" :bind="selectTopic">
        <el-form-item label="题干">
          <el-input type="textarea" autosize autocomplete="off" v-model="selectTopic.topic"></el-input>
        </el-form-item>
        <el-form-item v-for="(item,index) in selectTopic.chooseQuestion" :key="index">
          <div class="result">
            <div>
              <!-- 选择某个设置为对的答案 -->
              <el-checkbox v-model="item.cqIsRight">{{String.fromCharCode(65+index)}}、</el-checkbox>
            </div>
            <div class="cqOption">
              <!-- 双向绑定输入的答案 -->
              <el-input autosize autocomplete="off" v-model="item.cqOption" size="small"></el-input>
            </div>
            <!-- 删除按钮 -->
            <div>
              <!-- circle 是否显示圆形 -->
              <el-button
                v-show="selectTopic.chooseQuestion.length>2"
                style="margin-left: 20px;"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleDomain(item)"
                size="small"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="score">
            分 值
            <el-input-number
              size="mini"
              v-model="selectTopic.grade"
              :min="selectTopic.min"
              :max="selectTopic.max"
            ></el-input-number>
          </div>
        </el-form-item>
        <!-- 新增 重置按钮 -->
        <el-form-item>
          <el-button size="small" round @click="resetForm">重置</el-button>
          <el-button size="small" round class="add" @click="addDomain" :disabled="selectTopic.chooseQuestion.length>5">新增选项</el-button>
          <el-button
            size="small"
            type="primary"
            round
            icon="el-icon-document-checked"
            @click="submitForm(selectTopic)"
          >保存题目</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  props: ["testPaperId", "radio"],
  data() {
    return {
      //选择题
      selectTopic: {
        topic: "", //主题
        min: 1, //最小分数
        max: 10, //最大分数
        grade: 2, //默认分数
        chooseQuestion: [
          //cqOption  填入的类容，cqIsRight  true为正确答案 false反之
          { cqOption: "", cqIsRight: false },
          { cqOption: "", cqIsRight: false },
          { cqOption: "", cqIsRight: false },
          { cqOption: "", cqIsRight: false }
        ]
      }
    };
  },
  methods: {
    resetForm() {
      this.selectTopic.topic = "";
      //重置选项
      this.selectTopic.chooseQuestion = [
        //将选项数组重新赋值
        {
          cqOption: "",
          cqIsRight: ""
        },
        {
          cqOption: "",
          cqIsRight: ""
        },
        {
          cqOption: "",
          cqIsRight: ""
        },
        {
          cqOption: "",
          cqIsRight: ""
        }
      ];
    },
    //保存题目
    submitForm(submitForm) {
      let _this = this;
      if (submitForm.topic.trim() == "") {
        //题干是不是为空
        _this.$message.warning("题干不能为空");
      } else {
        //如果输入的答案都选上了为true
        let t1 = true;
        for (let i = 0; i < submitForm.chooseQuestion.length; i++) {
          if (submitForm.chooseQuestion[i].cqOption.trim() == "") {
            //其中一个没有选跳出去为false 提示用户 进入下次循环
            t1 = false;
            _this.$message.warning(
              "请输入" + String.fromCharCode(65+i) + "的内容！"
            );
            break;
          }
        }
        //判断是否为true
        if (t1) {
          //看是否有正确答案 如果没有则会返回-1
          let index = submitForm.chooseQuestion.findIndex(
            item => item.cqIsRight == true
          );
           if (index == -1) {
            _this.$message.warning("请选择一个正确的答案");
          }else{
          
          _this.axios
            .post("/api/TestPaper/AddQuestionToTestPaper", {
              tpqPaperId: _this.testPaperId, //获取试卷主键编号
              tpqScore:  _this.selectTopic.grade, //分值 _this.selectTopic.grade; //分值
              tpqQuestion: {
                questionTitle:  _this.selectTopic.topic,//题目的标题
                questionTypeId: _this.radio, //题目的类型 1=选择题 2=填空题 3=问答题
                chooseQuestion:  _this.selectTopic.chooseQuestion,//答案信息
              }
            })
            .then(res => {
              if(res.data.code==1){
                 _this.$message.success("添加成功")
                 _this.resetForm();
                 //向父组件传递最新值
                 _this.$emit('upSelectTopic')
              }
            })
            .catch(e => {
              console.log(e);
            });
          }
        }
      }
    },
    //删除
    deleDomain(item) {
      let _this = this;
      //查找点击传下来的数据在selectTopic.chooseQuestion 存不存在  如果有则返回下标
      let index = _this.selectTopic.chooseQuestion.indexOf(item);
      if (index !== -1) {
        _this.selectTopic.chooseQuestion.splice(index, 1);
      }
    },
    //增加
    addDomain() {
      this.selectTopic.chooseQuestion.push({//末尾添加一个对象
          cqOption: "",//选项内容
          cqIsRight: false//正确与否
      })
    }
  }
};
</script>
<style lang="less" scoped>
// 选择样式
.result {
  display: flex;
  margin-left: -60px !important;
}
.cqOption {
  margin-left: 10px;
  width: 95%;
}
.score {
  margin-left: -35px;
}
.add {
  background: #82848a !important;
  border-color: #82848a !important;
  color: #fff !important;
}
.add:hover {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #fff;
}
</style>